<template>
  <div class="all-ticket-view">
    <div class="content-list-wrap">
      <div class="content-list" v-for="(item, index) in allData" :key="item.id">
        <ticket-list-com
          :ticketData="item"
          @cancelTicket="cancelTicket(item)"
          @payOrConfirm="payOrConfirm(item)"
          @toComment="toComment(item)"
        />
      </div>
    </div>
    <h1 v-if="allData.length == 0">没有任何订单数据哦~</h1>
  </div>
</template>

<script>
import TicketListCom from "@/components/ticketListCom.vue";
import {mapMutations} from 'vuex'
export default {
  name: "AllTicketView",
  components: { TicketListCom },
  data() {
    return {
      allData: [],
      payingData: [],
      payedData: [],
      commentTicket: [],
      commentedData: [],
    };
  },
  activated() {
    this.getData();
    let commentTicket = JSON.parse(localStorage.getItem("commentTicket"));
    let payingData = JSON.parse(localStorage.getItem("payingData"));
    let payedData = JSON.parse(localStorage.getItem("payedData"));
    let commentedData = JSON.parse(localStorage.getItem("commentedData"));
    let arr = [];
    if (!commentTicket) {
      localStorage.setItem("commentTicket", JSON.stringify(arr));
    }
    if (!payingData) {
      localStorage.setItem("payingData", JSON.stringify(arr));
    }
    if (!payedData) {
      localStorage.setItem("payedData", JSON.stringify(arr));
    }
    if (!commentedData) {
      localStorage.setItem("commentedData", JSON.stringify(arr));
    }
  },
  methods: {
    ...mapMutations(['addDataToCommentTicket']),
    getData() {
      this.payingData = JSON.parse(localStorage.getItem("payingData"));
      this.payedData = JSON.parse(localStorage.getItem("payedData"));
      this.commentTicket = JSON.parse(localStorage.getItem("commentTicket"));
      this.commentedData = JSON.parse(localStorage.getItem("commentedData"));
      let idArr = [];
      this.allData.forEach((item) => {
        idArr.push(item.id);
      });
      if (this.payingData) {
        if (this.payingData.length > 0) {
          this.payingData.forEach((item) => {
            if (idArr.indexOf(item.id) == -1) {
              this.allData.push(...this.payingData);
            }
          });
        }
      }
      if (this.payedData) {
        if (this.payedData.length > 0) {
          this.payedData.forEach((item) => {
            if (idArr.indexOf(item.id) == -1) {
              this.allData.push(...this.payedData);
            }
          });
        }
      }
      if (this.commentTicket) {
        if (this.commentTicket.length > 0) {
          this.commentTicket.forEach((item) => {
            if (idArr.indexOf(item.id) == -1) {
              this.allData.push(...this.commentTicket);
            }
          });
        }
      }
      if (this.commentedData) {
        if (this.commentedData.length > 0) {
          this.commentedData.forEach((item) => {
            if (idArr.indexOf(item.id) == -1) {
              this.allData.push(...this.commentedData);
            }
          });
        }
      }
    },
    cancelTicket(item) {
      this.allData.forEach((item2, index) => {
        if (item2.id == item.id) {
          this.$dialog
            .confirm({
              title: "提示",
              message: "确定要取消该订单吗?",
            })
            .then(() => {
              this.allData.splice(index, 1);
              if (item.isPay && !item.isComment && !item.isCommented) {
                this.payedData.forEach((item3, index3) => {
                  if (item3.id == item.id) {
                    this.payedData.splice(index3, 1);
                  }
                });
                localStorage.setItem(
                  "payedData",
                  JSON.stringify(this.payedData)
                );
              } else if (!item.isPay && !item.isComment && !item.isCommented) {
                this.payingData.forEach((item3, index3) => {
                  if (item3.id == item.id) {
                    this.payingData.splice(index3, 1);
                  }
                });
                localStorage.setItem(
                  "payingData",
                  JSON.stringify(this.payingData)
                );
              } else if (item.isComment) {
                this.commentTicket.forEach((item3, index3) => {
                  if (item3.id == item.id) {
                    this.commentTicket.splice(index3, 1);
                  }
                });
                localStorage.setItem(
                  "commentTicket",
                  JSON.stringify(this.commentTicket)
                );
              } else if (item.isCommented) {
                this.commentedData.forEach((item3, index3) => {
                  if (item3.id == item.id) {
                    this.commentedData.splice(index3, 1);
                  }
                });
                localStorage.setItem(
                  "commentedData",
                  JSON.stringify(this.commentedData)
                );
              }
              this.getData();
              this.$emit('refesh')
            })
            .catch(() => {
              // on cancel
              console.log(item);
            });
        }
      });
    },
    payOrConfirm(item) {
      let commentTicket = JSON.parse(localStorage.getItem("commentTicket"));
      let payedData = JSON.parse(localStorage.getItem("payedData"));
      let payingData = JSON.parse(localStorage.getItem("payingData"));
        if (item.isPay) {
          this.$dialog
            .confirm({
              title: "提示",
              message: "确定收到货了吗?",
            })
            .then(() => {
              payedData.forEach((item2, index) => {
                console.log(item2);
                if (item2.id == item.id) {
                  payedData.splice(index, 1);
                }
              });
              localStorage.setItem("payedData", JSON.stringify(payedData));
              commentTicket.push({ ...item, isComment: true });
              localStorage.setItem(
                "commentTicket",
                JSON.stringify(commentTicket)
              );
              this.getData();
              this.$emit('refesh')
            }).catch(() => {
              // on cancel
            });
        } else {
          item.isPay = true;
          payedData.push(item);
          localStorage.setItem("payedData", JSON.stringify(payedData));
          payingData.forEach((item2, index) => {
            if (item2.id == item.id) {
              payingData.splice(index, 1);
            }
          });
          localStorage.setItem("payingData", JSON.stringify(payingData));
          // this.getData();
        }
      
    },
    toComment(item) {
      this.addDataToCommentTicket(item)
      this.$router.push({name:'commentTicket'})
    },
  },
};
</script>

<style lang="scss" scoped>
.all-ticket-view {
  padding-bottom: 100px;
  h1 {
    font-size: 30px;
    font-weight: 600;
    margin: 100px auto;
  }
}
</style>